<template>
<div class="tw-summarylistbox" :style="{textAlign: align}">
  <ul v-if="summaryList && summaryList.length>0" ref="listBox"
    class="tw-summarylist">
    <li class="tw-summarylist-item"
      :style="{width: itemWidth}"
      v-for="(item,idx) in summaryList"
      :key="idx">
      <div class="tw-summarylist-item-body"
        :style="{backgroundImage: `linear-gradient(135deg, ${color1}, ${color2})`}">
        <h4 :style="{fontSize: summaryNameFontSize, color: summaryNameColor}">{{item.name}}</h4>
        <div :style="{fontSize: summaryValueFontSize, color: summaryValueColor}">{{item.value}}</div>
        <p v-if="item.html" class="tw-summarylist-desc" :style="{fontSize: descFontSize, color: descColor}" v-html="item.html"></p>
      </div>
    </li>
  </ul>
  <div v-else class="tw-libnodata"></div>
</div>
</template>

<script>
import props from './props'

export default {
  name: 'table',

  props,

  data() {
    return {
      itemWidth: '100%'
    }
  },

  methods: {
    computeWidthForItem () {
      const count = this.columns || this.summaryList.length
      this.itemWidth = 1 / count * 100 - 2 + '%'
    }
  },

  mounted () {
    this.computeWidthForItem()
  },

  watch: {
    columns () {
      this.computeWidthForItem()
    },

    summaryList () {
      this.computeWidthForItem()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
